<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改菜单')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-guidance-edit" th:object="${guidanceNode}">
        <input name="tsGuidanceId" type="hidden" th:field="*{tsGuidanceId}"/>
        <input id="treeId" name="parentId" type="hidden" th:field="*{parentId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label ">上级项：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" type="text" onclick="selectGuidanceTree()" id="treeName" readonly="true"
                           th:value="${guidanceNode.parentName == null ? '无' : guidanceNode.parentName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">科室名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="guidanceName" id="guidanceName" th:field="*{guidanceName}"
                       required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">指南类型：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('ts_guidance_type')}">
                    <input type="radio" th:id="${dict.dictCode}" name="guidanceType" id="guidanceType"
                           th:value="${dict.dictValue}" th:field="${guidanceNode.guidanceType}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group" th:if="*{iconUrl!=null&&iconUrl.length()>1}">
            <label class="col-sm-3 control-label">上次上传图标：</label>
            <div class="col-sm-8" id="oldIconUrl">
                <a th:href="*{iconUrl}" target="_blank">
                    <img th:src="*{iconUrl}" class="img-rounded col-sm-3"/>
                </a>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传科室图标：</label>
            <div class="col-sm-3" id="iconUrl">
                <input id="file-icon" type="file" name="iconFile" multiple/>
            </div>
        </div>
        <div class="form-group" th:if="*{docUrl!=null&&docUrl.length()>1}">
            <label class="col-sm-3 control-label">上次上传文档：</label>
            <div class="col-sm-3" id="oldDocUrl">
                <a th:href="*{docUrl}" target="_blank">[[*{docName}]]</a>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传文档：</label>
            <div class="col-sm-3" id="docUrl">
                <input id="file-doc" type="file" name="docFile" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">显示排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" th:field="*{orderNum}" required>
            </div>
        </div>
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-3 control-label">显示状态：</label>-->
        <!--            <div class="col-sm-8">-->
        <!--                <div class="radio-box" th:each="dict : ${@dict.getType('sys_show_hide')}">-->
        <!--                    <input type="radio" th:id="${dict.dictCode}" name="visible" th:value="${dict.dictValue}"-->
        <!--                           th:field="*{visible}">-->
        <!--                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script>
    var prefix = ctx + "system/touchscreen/guidance";
    var docUrl = "[[${guidanceNode.docUrl}]]";
    var docName = "[[${guidanceNode.docName}]]";
    var iconUrl = "[[${guidanceNode.iconUrl}]]";
    $(function () {
        var type = $('input[name="guidanceType"]:checked').val();
        show2Hide(type);
        $(":radio").on('ifChecked',
            function (event) {
                var guidanceType = $(event.target).val();
                show2Hide(guidanceType);
            });
    });
    $(document).ready(function () {
        initUploadDoc();
        initUploadIcon();
    });

    function initUploadDoc() {
        var control = $('#file-doc');
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            height: 300,
            width: 500,
            maxFileCount: 1,
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            showRemove: false,
            autoReplace: false,
            uploadAsync: true,
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            docUrl = res.docUrl;
            docName = res.docName;
        });
    }

    function initUploadIcon() {
        var control = $('#file-icon');
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadIcon",
            theme: "fa",
            height: 300,
            width: 500,
            maxFileCount: 1,
            allowedFileExtensions: ['png', 'jpg', 'jpeg'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            showRemove: false,
            autoReplace: false,
            uploadAsync: true,
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            iconUrl = res.iconUrl;
        });
    }

    $("#form-guidance-edit").validate({
        onkeyup: false,
        rules: {
            guidanceType: {
                required: true,
            },
            guidanceName: {
                required: true,
            },
            orderNum: {
                digits: true
            },
        },
        messages: {
            "guidanceName": {
                remote: "办事指南项已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        var type = $('input[name="guidanceType"]:checked').val();
        if ($.validate.form()) {
            if (type != "M") {
                var data = $("#form-guidance-edit").serializeArray();
                data.push({"name": "docUrl", "value": docUrl});
                data.push({"name": "docName", "value": docName});
                $.operate.save(prefix + "/edit", data);
            } else {
                var data = $("#form-guidance-edit").serializeArray();
                data.push({"name": "iconUrl", "value": iconUrl});
                $.operate.save(prefix + "/edit", data);
            }
        }
    }

    function show2Hide(type) {
        if (type == "M") {
            $("#docUrl").parents(".form-group").hide();
            $("#oldDocUrl").parents(".form-group").hide();
            $("#iconUrl").parents(".form-group").show();
            $("#oldIconUrl").parents(".form-group").show();
        } else {
            $("#docUrl").parents(".form-group").show();
            $("#oldDocUrl").parents(".form-group").show();
            $("#iconUrl").parents(".form-group").hide();
            $("#oldIconUrl").parents(".form-group").hide();
        }
    }

    /*菜单管理-修改-选择菜单树*/
    function selectGuidanceTree() {
        var guidanceId = $("#treeId").val();
        if (guidanceId > 0) {
            var url = prefix + "/selectGuidanceTree/" + guidanceId;
            $.modal.open("选择办事指南项", url, '380', '380');
        } else {
            $.modal.alertError("科室不可更改上级");
        }
    }

    function selectGuidanceTree() {
        var guidanceId = $("#treeId").val();
        if (guidanceId > 0) {
            var url = prefix + "/selectGuidanceTree/" + guidanceId;
            var options = {
                title: '办事指南项选择',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        } else {
            $.modal.alertError("科室不可更改上级");
        }
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }
</script>
</body>
</html>
